<template>
    <div class = "addbaserimone" v-loading = "loading">
         <el-container>
        <el-container>
        <el-main>
              <el-breadcrumb separator="/" style="padding-bottom:15px;">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" :to="{ path: 'Addbase' }">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">基地周边</el-breadcrumb-item>
                <el-breadcrumb-item  @click.native = "goBack">{{Top}}</el-breadcrumb-item>
                </el-breadcrumb>
             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="title">
                <el-input  v-model="ruleForm.title" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item  label="内容" prop="content">
                <el-input
                :rows="3"
                placeholder="请输入内容"
                v-model="ruleForm.content">
                </el-input>
            </el-form-item>
            <!-- <el-form-item  label="目标基地ID" prop="targetId" v-if = "Boole === 0">
                <el-input
                type="number"
                :rows="3"
                placeholder="请输入ID"
                v-model="ruleForm.targetId">
                </el-input>
            </el-form-item> -->
            <el-form-item label="目标基地ID"  v-if = "Boole === 0" prop = "targetId">
                <el-select v-model="ruleForm.targetId" placeholder="请选择区域">
                  <el-option
                    v-for="item in optionsone"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id"
                   >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="权重" prop="weight">
                <el-input
                type="number"
                :rows="3"
                placeholder="请输入内容"
                v-model="ruleForm.weight">
                </el-input>
            </el-form-item>
            <el-form-item  label="链接" prop="link">
                <el-input
                :rows="3"
                placeholder="请输入链接"
                v-model="ruleForm.link">
                </el-input>
            </el-form-item>
            <el-form-item label="类型" prop = "value" v-if = "Boole === 0">
                <el-select v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                   >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片">
               <el-upload
              class="upload-demo"
              :action="this.IP"
              :data="{type:'image'}"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :limit="1"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              </el-upload> 
            </el-form-item>
            <el-form-item>
            <el-button v-if = "Boole===0" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button v-if = "Boole===1" type="primary" @click="submitFormone('ruleForm')">修改</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
        </el-form>
        </el-main>
        </el-container>
         </el-container>
    </div>
</template>
<script>
export default {
    data(){
           var validatetitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名称'));
        } else {
          callback();
        }
      };
      var validatecontent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容'));
        } else {
          callback();
        }
      };
      var validateweight = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入权重'));
        } else {
          callback();
        }
      };
      var validatetype = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入类型'));
        } else {
          callback();
        }
      };
      var validatetargetId = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入基地ID'));
        } else {
          callback();
        }
      };
      var validatelink = (rule, value, callback) => {
        var pattrn = /^(http:\/\/|^https:\/\/|^\/\/)((\w|=|\?|\.|\/|&|-)+)/g
        if (value === '') {
           callback(new Error('请输入链接'));
        } else if(!pattrn.test(value)){
           callback(new Error('请输入正确的链接'));
        } else {
           callback(); 
        }
      };
        return{
            Top:'',
            loading:false,
            fileList:[],
            Boole:null,
            form:{},
            Baseid:'',
            options: [{
            value: 'base',
            label: '基地',
            }, {
            value: 'scenic_spot',
            label: '景区'
            }, {
            value: 'hoet',
            label: '酒店'
            }, {
            value: 'hotel',
            label: '民宿'
            }],
            optionsone: [],
            ruleForm: {
            link:'',
            title: '',
            content: '',
            imgId:'',
            weight:'',
            type: '',
            baseId:'',
            targetId:''
            },
            rules:{
            title: [
                { validator: validatetitle, trigger: 'blur' }
            ],
            content: [
                { validator: validatecontent, trigger: 'blur' }
            ],
            weight:[
                { validator: validateweight, trigger: 'blur' }
            ],
            type:[
                { validator: validatetype, trigger: 'blur' }
            ],
            targetId:[
                { validator: validatetargetId, trigger: 'blur' }
            ],
            link:[
                { validator: validatelink, trigger: 'blur' }
            ]
            },
        }
    },
    created() {
        this.List()
    },
    methods:{
        List(){
            this.form = this.$route.query.form
            if(this.form) {
                this.ruleForm = this.$route.query.form
                this.fileList = [{url:this.ruleForm.img.url}],
                this.ruleForm.imgId = this.$route.query.form.img.id
                this.Baseid = this.$route.query.form.Baseid
                this.Top = '修改'
                this.Boole = 1
            } else {
                this.Baseid = this.$route.query.item
                this.Top = '新增'
                this.Boole = 0
            }
            this.$api.Basetoaddordelete.GetbaseID().then(res => {
            this.optionsone = res.data
            }).catch(err => {
                console.log(err)
            })
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(this.ruleForm.imgId){
                if (valid) {
                this.loading = true
                let Add = {
                        baseId:this.Baseid,
                        type:this.ruleForm.type,
                        targetId:this.ruleForm.targetId,
                        imgId:this.ruleForm.imgId,
                        title:this.ruleForm.title,
                        content:this.ruleForm.content,
                        link:this.ruleForm.link,
                        weight:this.ruleForm.weight
                }
                this.$api.Basetoaddordelete.baserimadd(Add).then(res => {
                    if(res.code == 200){
                    //   this.tableData = [res.data,...this.tanleData]
                      this.loading = false
                      this.open1('成功','添加成功','success')
                      this.$router.push({path:'Addbaserim',query:{form:this.Baseid}})
                    } else {
                      this.loading = false
                      this.open1('失败','添加失败','warning')
                    }
                }).catch(err => {
                    console.log(err)
                })
                } else {
                    console.log('error submit!!');
                    return false
                }
                } else {
                      this.open1('失败','请添加图片','warning')
                }
            })
        },
        //修改
        submitFormone(formName){
            this.$refs[formName].validate((valid) => {
                if(this.ruleForm.imgId){
                if (valid) {
                    this.loading = true
                   let Add = {
                        imgId:this.ruleForm.imgId,
                        title:this.ruleForm.title,
                        content:this.ruleForm.content,
                        link:this.ruleForm.link,
                        weight:this.ruleForm.weight
                }
                this.$api.Basetoaddordelete.baserimamend(Add,this.ruleForm.id).then(res => {
                    if(res.code == 200){
                      this.open1('成功','修改成功','success')
                      this.loading = false
                      this.$router.push({path:'Addbaserim',query:{form:this.Baseid}})
                    } else {
                      this.loading = false
                      this.open1('失败','修改失败','warning')
                    }
                }).catch(err => {
                    console.log(err)
                })
                } else {
                    console.log('error submit!!');
                    return false
                }
                } else {
                    this.open1('失败','请添加图片','warning')
                }
            })
        },
        goBack(){
            this.$router.push({path:'Addbaserim',query:{form:this.Baseid}})
        },
        handleAvatarSuccess(response, file, fileList){
        this.ruleForm.imgId = file.response.data.id
        },
        handleRemove(file, fileList) {
          this.ruleForm.imgId = ''
        },
        handlePreview(file) {
          console.log(file);
        },
        open1(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
    }
}
</script>
<style scoped>

</style>
